<template>
  <div class="gradient-background">
    <div class="text-container">
      <Text class="cls1">水质多参数在线监测</Text>
      <Text class="cls2">{{ currentTime }}</Text>
    </div>
    <div class="box-container">
      <div class="box">


        <el-container style="height: 100%">
          <el-header class="colmain">
            <el-text style="font-size: 16px; color: #fff">一号设备</el-text>
            <el-text style="font-size: 16px; color: #fff">(A区)</el-text>
          </el-header>
          <el-main>

            <el-row>
              <el-col :span="10">
                <BoxVideo class="video-cls"></BoxVideo>
              </el-col>
              <el-col :span="14">
                <div class="container2">
                  <Litbox :parameter="parameters[0]"></Litbox>
                  <Litbox :parameter="parameters[1]"></Litbox>
                  <Litbox :parameter="parameters[2]"></Litbox>
                  <Litbox :parameter="parameters[3]"></Litbox>
                  <Litbox :parameter="parameters[4]"></Litbox>
                  <Litbox :parameter="parameters[5]"></Litbox>
                </div>
              </el-col>
            </el-row>


          </el-main>
        </el-container>
      </div>

      <div class="box">

        <el-container style="height: 100%">
          <el-header class="colmain">
            <el-text style="font-size: 16px; color: #fff">二号设备</el-text>
            <el-text style="font-size: 16px; color: #fff">(B区)</el-text>
          </el-header>
          <el-main>


           <el-row>
              <el-col :span="10">
                <BoxVideo class="video-cls"></BoxVideo>
              </el-col>
              <el-col :span="14">
                <div class="container2">
                       <Litbox :parameter="parameters2[0]"></Litbox>
              <Litbox :parameter="parameters2[1]"></Litbox>
              <Litbox :parameter="parameters2[2]"></Litbox>
              <Litbox :parameter="parameters2[3]"></Litbox>
              <Litbox :parameter="parameters2[4]"></Litbox>
              <Litbox :parameter="parameters2[5]"></Litbox>
                </div>
              </el-col>
            </el-row>

          </el-main>
        </el-container>
      </div>

      <div class="box">

        <el-container style="height: 100%">
          <el-header class="colmain">
            <el-text style="font-size: 16px; color: #fff">三号设备</el-text>
            <el-text style="font-size: 16px; color: #fff">(C区)</el-text>
          </el-header>
          <el-main>


            <el-row>
              <el-col :span="10">
                <BoxVideo class="video-cls"></BoxVideo>
              </el-col>
              <el-col :span="14">
                <div class="container2">
                 <Litbox :parameter="parameters3[0]"></Litbox>
              <Litbox :parameter="parameters3[1]"></Litbox>
              <Litbox :parameter="parameters3[2]"></Litbox>
              <Litbox :parameter="parameters3[3]"></Litbox>
              <Litbox :parameter="parameters3[4]"></Litbox>
              <Litbox :parameter="parameters3[5]"></Litbox>
                </div>
              </el-col>
            </el-row>

          </el-main>
        </el-container>
      </div>

      <div class="box">

        <el-container style="height: 100%">
          <el-header class="colmain">
            <el-text style="font-size: 16px; color: #fff">四号设备</el-text>
            <el-text style="font-size: 16px; color: #fff">(D区)</el-text>
          </el-header>
          <el-main>

            <el-row>
              <el-col :span="10">
                <BoxVideo class="video-cls"></BoxVideo>
              </el-col>
              <el-col :span="14">
                <div class="container2">
                    <Litbox :parameter="parameters4[0]"></Litbox>
              <Litbox :parameter="parameters4[1]"></Litbox>
              <Litbox :parameter="parameters4[2]"></Litbox>
              <Litbox :parameter="parameters4[3]"></Litbox>
              <Litbox :parameter="parameters4[4]"></Litbox>
              <Litbox :parameter="parameters4[5]"></Litbox>
                </div>
              </el-col>
            </el-row>

          </el-main>
        </el-container>
      </div>

      <div class="box">

        <el-container style="height: 100%">
          <el-header class="colmain">
            <el-text style="font-size: 16px; color: #fff">五号设备</el-text>
            <el-text style="font-size: 16px; color: #fff">(E区)</el-text>
          </el-header>
          <el-main>


            <el-row>
              <el-col :span="10">
                <BoxVideo class="video-cls"></BoxVideo>
              </el-col>
              <el-col :span="14">
                <div class="container2">
                <Litbox :parameter="parameters5[0]"></Litbox>
              <Litbox :parameter="parameters5[1]"></Litbox>
              <Litbox :parameter="parameters5[2]"></Litbox>
              <Litbox :parameter="parameters5[3]"></Litbox>
              <Litbox :parameter="parameters5[4]"></Litbox>
              <Litbox :parameter="parameters5[5]"></Litbox>
                </div>
              </el-col>
            </el-row>

          </el-main>
        </el-container>
      </div>

      <div class="box">

        <el-container style="height: 100%">
          <el-header class="colmain">
            <el-text style="font-size: 16px; color: #fff">六号设备</el-text>
            <el-text style="font-size: 16px; color: #fff">(F区)</el-text>
          </el-header>
          <el-main>

            <el-row>
              <el-col :span="10">
                <BoxVideo class="video-cls"></BoxVideo>
              </el-col>
              <el-col :span="14">
                <div class="container2">
                     <Litbox :parameter="parameters6[0]"></Litbox>
              <Litbox :parameter="parameters6[1]"></Litbox>
              <Litbox :parameter="parameters6[2]"></Litbox>
              <Litbox :parameter="parameters6[3]"></Litbox>
              <Litbox :parameter="parameters6[4]"></Litbox>
              <Litbox :parameter="parameters6[5]"></Litbox>
                </div>
              </el-col>
            </el-row>

          </el-main>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import Litbox from './LitBox.vue'
import BoxVideo from './BoxVideo.vue'
export default {
  components: {
    Litbox,// 注册组件2
    BoxVideo
  },
  data() {
    return {
      currentTime: '', // 用于存储当前时间
      first: false,
      parameters: [
        { name: 'PH', value: 7.78, variation: 0.35, unit: 'ph' },
        { name: '温度', value: 21.2, variation: 0.5, unit: '℃' },
        { name: '溶解氧', value: 8.7, variation: 0.35, unit: 'mg/L' },
        { name: '氨氮', value: 0.38, variation: 0.1, unit: 'mg/L' },
        { name: '总磷', value: 0.28, variation: 0.1, unit: 'mg/L' },
        { name: '总氮', value: 1.45, variation: 0.35, unit: 'mg/L' }
      ],

      parameters2: [
        { name: 'PH', value: 7.95, variation: 0.35, unit: 'ph' },
        { name: '温度', value: 17.2, variation: 0.5, unit: '℃' },
        { name: '溶解氧', value: 8.3, variation: 0.35, unit: 'mg/L' },
        { name: '氨氮', value: 0.45, variation: 0.1, unit: 'mg/L' },
        { name: '总磷', value: 0.22, variation: 0.1, unit: 'mg/L' },
        { name: '总氮', value: 1.1, variation: 0.35, unit: 'mg/L' }
      ],

      parameters3: [
        { name: 'PH', value: 7.82, variation: 0.35, unit: 'ph' },
        { name: '温度', value: 21.3, variation: 0.5, unit: '℃' },
        { name: '溶解氧', value: 8.6, variation: 0.35, unit: 'mg/L' },
        { name: '氨氮', value: 0.36, variation: 0.1, unit: 'mg/L' },
        { name: '总磷', value: 0.27, variation: 0.1, unit: 'mg/L' },
        { name: '总氮', value: 1.25, variation: 0.35, unit: 'mg/L' }
      ],

      parameters4: [
        { name: 'PH', value: 7.9, variation: 0.35, unit: 'ph' },
        { name: '温度', value: 21.7, variation: 0.5, unit: '℃' },
        { name: '溶解氧', value: 8.4, variation: 0.35, unit: 'mg/L' },
        { name: '氨氮', value: 0.42, variation: 0.1, unit: 'mg/L' },
        { name: '总磷', value: 0.23, variation: 0.1, unit: 'mg/L' },
        { name: '总氮', value: 1.35, variation: 0.35, unit: 'mg/L' }
      ],

      parameters5: [
        { name: 'PH', value: 7.8, variation: 0.35, unit: 'ph' },
        { name: '温度', value: 21.4, variation: 0.5, unit: '℃' },
        { name: '溶解氧', value: 8.8, variation: 0.35, unit: 'mg/L' },
        { name: '氨氮', value: 0.39, variation: 0.1, unit: 'mg/L' },
        { name: '总磷', value: 0.24, variation: 0.1, unit: 'mg/L' },
        { name: '总氮', value: 1.2, variation: 0.35, unit: 'mg/L' }
      ],

      parameters6: [
        { name: 'PH', value: 7.85, variation: 0.35, unit: 'ph' },
        { name: '温度', value: 21.6, variation: 0.5, unit: '℃' },
        { name: '溶解氧', value: 8.2, variation: 0.35, unit: 'mg/L' },
        { name: '氨氮', value: 0.41, variation: 0.1, unit: 'mg/L' },
        { name: '总磷', value: 0.26, variation: 0.1, unit: 'mg/L' },
        { name: '总氮', value: 1.4, variation: 0.35, unit: 'mg/L' }
      ],

      intervalId: null // 用于存储定时器ID
    }
  },
  methods: {
    updateTime() {
      const now = new Date() // 获取当前时间
      const formattedTime = `${now.getFullYear()}-${String(
        now.getMonth() + 1
      ).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(
        now.getHours()
      ).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(
        now.getSeconds()
      ).padStart(2, '0')}`
      this.currentTime = formattedTime // 更新时间
    },
    wgetValue(data) {
      const ob = [
        { name: 'PH', value: 7.86, variation: 0.35, unit: 'ph' },
        { name: '温度', value: 17.2, variation: 0.5, unit: '℃' },
        { name: '溶解氧', value: 8.5, variation: 0.35, unit: 'mg/L' },
        { name: '氨氮', value: 0.4, variation: 0.1, unit: 'mg/L' },
        { name: '总磷', value: 0.25, variation: 0.1, unit: 'mg/L' },
        { name: '总氮', value: 1.3, variation: 0.35, unit: 'mg/L' }
      ]

      // 使用 find 方法查找匹配的元素
      const matchedItem = ob.find(item => item.name === data)

      // 返回匹配到的数据，如果没有找到则返回 null
      return matchedItem || null
    },

    updateValues() {
      const updateSingleParameter = param => {
        const baseValue = this.wgetValue(param.name)
        if (!baseValue) {
          console.warn(`No base value found for parameter: ${param.name}`)
          return
        }
        const variation = (Math.random() - 0.5) * param.variation * 2
        param.value = Math.max(0, baseValue.value + variation) // 确保值不小于0
      }

      // 更新所有参数
      this.parameters.forEach(updateSingleParameter)
      this.parameters2.forEach(updateSingleParameter)
      this.parameters3.forEach(updateSingleParameter)
      this.parameters4.forEach(updateSingleParameter)
      this.parameters5.forEach(updateSingleParameter)
      this.parameters6.forEach(updateSingleParameter)
    },

    startRandomChanges(interval) {
      if (this.intervalId) {
        clearInterval(this.intervalId) // 清除已有的定时器
      }
      this.intervalId = setInterval(() => {
        this.updateValues()
      }, interval)
    },
    stopRandomChanges() {
      if (this.intervalId) {
        clearInterval(this.intervalId) // 清除定时器
        this.intervalId = null
      }
    }
  },
  mounted() {
    // 启动随机变化，每2000毫秒（2秒）更新一次
    this.startRandomChanges(7000)
    this.updateTime() // 初始化时间
    setInterval(this.updateTime, 1000) // 每秒更新一次时间
  },
  beforeUnmount() {
    // 组件销毁前停止随机变化
    this.stopRandomChanges()
  }
}
</script>

<style scoped>
.gradient-background {
  width: 100%;
  /* 宽度自适应 */
  height: 100vh;
  /* 高度自适应 */
  background: linear-gradient(to right,
      #2a0445 0%,
      #3325b3 50%,
      #3697bd 100%);
  /* 渐变效果 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 水平居中 */
  justify-content: flex-start;
  /* 从顶部开始排列 */
  padding: 20px;
  /* 父布局与内容的间距 */
  box-sizing: border-box;
}

.text-container {
  width: 100%;
  /* 宽度自适应 */
  text-align: center;
  /* 文字水平居中 */
  margin-bottom: 20px;
  /* 文字与box之间的间距 */
}

.cls1 {
  color: white;
  font-size: 40px;
  letter-spacing: 10px;
}

.cls2 {
  color: white;
  font-size: 25px;
  letter-spacing: 1px;
}

.box-container {
  display: grid;
  height: 100%;
  grid-template-rows: 1fr 1fr;
  /* 明确指定两行，均分高度 */

  grid-template-columns: repeat(3, 1fr);
  /* 每行三个box */
  gap: 20px;
  /* box之间的间距 */
  width: 100%;
  /* 宽度自适应 */
  padding: 10px 20px;
  /* 父布局与box的横向间距 */
  box-sizing: border-box;
}

.box {
  background-color: rgba(135, 206, 235, 0.5);
  /* 半透明背景色 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  width: 460px;
  height: 280px;
  /* 长方体高度 */
}

.colmain {
  display: flex;
  /* 使用 Flexbox 布局 */
  flex-direction: column;
  /* 竖向排列（垂直方向） */
  align-items: center;
  /* 水平居中（主轴为垂直方向时，align-items 控制水平对齐） */
  justify-content: center;
  /* 垂直对齐（主轴为垂直方向时，justify-content 控制垂直对齐） */
}

.container2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 每行 3 列 */
  grid-template-rows: repeat(2, 1fr);
  /* 每列 2 行 */
  gap: 10px;
  /* 单元格之间的间距 */
  width: 100%;
  /* 容器宽度 */
  height: 100%;
  /* 容器高度 */
  /*   padding: 2px; /* 内边距 */
  box-sizing: border-box;
  justify-content: center;
  /* 水平居中 */
  align-content: center;
  /* 垂直居中 */
}

.box2 {
  background-color: rgba(135, 206, 235, 0.5);
  /* 半透明背景色 */
  display: flex;
  justify-content: center;
  /* 内容水平居中 */
  font-size: 20px;
  color: white;
  height: 100%;
  /* 高度占满单元格 */
  flex-direction: column;
  /* 子元素垂直排列 */

  box-sizing: border-box;

  align-items: center;
  /* 水平居中 */
}


/* 让视频容器有高度 */
.video-cls {
  /* margin-top: 50px;
margin-left: 10px; */
  /* 先写死 200px 试试，能看到画面后再改百分比或自适应 */
}
</style>
